<template>
<!-- 发现音乐的个性推荐 -->
  <div v-loading.fullscreen.lock="loading" element-loading-spinner="el-icon-loading">
    <!-- 轮播图 -->
    <banner></banner>
    <!-- 热门推荐文字 -->
    <div class="title">
      热门推荐 <i class="iconfont icon-arrow-right"></i>
    </div>
    <!-- 歌单封面 -->
    <cover :imgList="imgList" @clickToDo="toPlayListDetail"></cover>

  </div>
</template>

<script>
import Banner from '@/components/Banner/banner.vue'
import Cover from '@/components/CoverImg/cover.vue'
import { getPersonalized } from '@/api/personalized.js'
export default {
  data () {
    return {
      imgList: [],
      loading: true
    }
  },
  created () {
    this.showCover()
  },
  components: {
    Banner,
    Cover
  },
  methods: {
    // 展示热门歌单封面图
    async showCover () {
      this.loading = true
      const res = await getPersonalized(10)
      if (res.status !== 200) return this.$message.error('获取封面失败')
      this.imgList = res.data.result
      this.loading = false
    },
    // 跳转到歌单详情
    toPlayListDetail (id) {
      this.$router.push(`/playListDetail/${id}`)
    }
  }
}
</script>

<style lang="less" scoped>
.title {
  font-size: 20px;
  font-weight: bold;
  text-align: left;
  cursor: pointer;
}
</style>
